<template>
  <div class="container">
    <card-header>
      <template #left>
        <span class="textInfo">说明：目前支持学科和关键字条件筛选</span>
      </template>
      <template #right>
       <el-button type="success" size="small" @click="$router.push('new')" icon="el-icon-edit">新增试题</el-button>
      </template>
    </card-header>

<questions-search @update-data='onSearch'/>

<!-- tabs标签页 -->
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane label="全部" name="first">
        <all-question :pageForm="pageForm" ref="allquestion"/>
      </el-tab-pane>
      <el-tab-pane label="待审核" name="second">
        <all-question :pageForm="pageForm" ref="allquestion2" />

      </el-tab-pane>
      <el-tab-pane label="已审核" name="third">
        <all-question :pageForm="pageForm" ref="allquestion3" />

      </el-tab-pane>
      <el-tab-pane label="已拒绝" name="fourth">
        <all-question :pageForm="pageForm" ref="allquestion4" />

      </el-tab-pane>
    </el-tabs>

  </div>
</template>

<script>
import allQuestion from '../components/all-question.vue'
import QuestionsSearch from '../components/questions-search.vue'
export default {
  components: { allQuestion, QuestionsSearch },
  data () {
    return {
      activeName: 'first',
      pageForm: {
        page: 1, // 当前页码
        pages: 1, // 总页码数
        pagesize: 5 // 一页显示条数
      } // 分页数据
    }
  },
  methods: {
    handleClick (tab) {
      if (tab.index === '0') { // 全部
        const form = {}
        this.$refs.allquestion.loadTableInfo(form)
        console.log(this.pageForm)
      }
      if (tab.index === '1') { // 待审核
        const form = { chkState: 0 }
        this.$refs.allquestion2.loadTableInfo(form)
      }
      if (tab.index === '2') { // 已通过
        const form = { chkState: 1 }
        this.$refs.allquestion3.loadTableInfo(form)
      }
      if (tab.index === '3') { // 已拒绝
        const form = { chkState: 2 }
        this.$refs.allquestion4.loadTableInfo(form)
      }
    },
    // 搜索
    onSearch (e) {
      this.$refs.allquestion.loadTableInfo(e)
    }
  }
}
</script>

<style scoped lang="scss">
.container {
  background-color: #fff;
  padding: 20px;
}
.textInfo{
  font-size: 12px;
    color: pink;
}
  ::v-deep .el-row{
    margin-bottom: 15px;
  }
</style>
